<!-- src/views/Overview.vue -->
<template>
    <div class="overview-container">
      <h2>系统概览</h2>
      
      <el-row :gutter="20">
        <!-- 统计卡片 -->
        <el-col :span="6" v-for="(item, index) in statisticsData" :key="index">
          <el-card class="statistics-card" :class="item.type">
            <div class="card-content">
              <div class="icon-container">
                <el-icon :size="40"><component :is="item.icon" /></el-icon>
              </div>
              <div class="data-container">
                <div class="data-value">{{ item.value }}</div>
                <div class="data-title">{{ item.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 图表行 -->
      <el-row :gutter="20" class="chart-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>用户增长趋势</span>
                <el-radio-group v-model="userChartPeriod" size="small">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container">
              <!-- 这里放图表组件 -->
              <div class="chart-placeholder">用户增长趋势图表</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>系统访问量</span>
                <el-radio-group v-model="visitsChartPeriod" size="small">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container">
              <!-- 这里放图表组件 -->
              <div class="chart-placeholder">系统访问量图表</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 活动和任务 -->
      <el-row :gutter="20" class="activity-row">
        <el-col :span="12">
          <el-card class="activity-card">
            <template #header>
              <div class="card-header">
                <span>最近活动</span>
                <el-button type="text">查看全部</el-button>
              </div>
            </template>
            <div class="activity-list">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in recentActivities"
                  :key="index"
                  :timestamp="activity.time"
                  :type="activity.type"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="task-card">
            <template #header>
              <div class="card-header">
                <span>待办任务</span>
                <el-button type="text">添加任务</el-button>
              </div>
            </template>
            <div class="task-list">
              <el-table :data="todoTasks" style="width: 100%">
                <el-table-column prop="title" label="任务名称" />
                <el-table-column prop="deadline" label="截止日期" width="120" />
                <el-table-column prop="priority" label="优先级" width="100">
                  <template #default="scope">
                    <el-tag
                      :type="scope.row.priority === '高' ? 'danger' : scope.row.priority === '中' ? 'warning' : 'info'"
                    >
                      {{ scope.row.priority }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template #default="scope">
                    <el-button
                      size="small"
                      type="success"
                      plain
                      @click="completeTask(scope.$index)"
                    >
                      完成
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { User, View, ShoppingCart, Goods } from '@element-plus/icons-vue'
  
  // 统计卡片数据
  const statisticsData = ref([
    { title: '用户总数', value: '8,846', icon: 'User', type: 'primary' },
    { title: '访问量', value: '12,386', icon: 'View', type: 'success' },
    { title: '订单数', value: '2,956', icon: 'ShoppingCart', type: 'warning' },
    { title: '商品数', value: '1,568', icon: 'Goods', type: 'danger' }
  ])
  
  // 图表周期选择
  const userChartPeriod = ref('month')
  const visitsChartPeriod = ref('month')
  
  // 最近活动数据
  const recentActivities = ref([
    { content: '张三更新了系统设置', time: '2025-05-15 10:34', type: 'primary' },
    { content: '李四添加了新用户', time: '2025-05-14 16:20', type: 'success' },
    { content: '王五导出了数据报表', time: '2025-05-14 09:43', type: 'info' },
    { content: '系统例行维护', time: '2025-05-13 22:00', type: 'warning' },
    { content: '赵六修改了商品分类', time: '2025-05-13 15:12', type: 'danger' }
  ])
  
  // 待办任务数据
  const todoTasks = ref([
    { title: '完成用户模块开发', deadline: '2025-05-18', priority: '高' },
    { title: '系统安全测试', deadline: '2025-05-20', priority: '高' },
    { title: '整理月度报表', deadline: '2025-05-25', priority: '中' },
    { title: '更新系统文档', deadline: '2025-05-30', priority: '低' }
  ])
  
  // 完成任务
  const completeTask = (index) => {
    todoTasks.value.splice(index, 1)
  }
  </script>
  
  <style scoped>
  .overview-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
  }
  
  .statistics-card {
    margin-bottom: 20px;
    border-radius: 8px;
  }
  
  .statistics-card .card-content {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  
  .statistics-card .icon-container {
    padding: 12px;
    border-radius: 8px;
    margin-right: 15px;
  }
  
  .statistics-card .data-container {
    display: flex;
    flex-direction: column;
  }
  
  .statistics-card .data-value {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
  }
  
  .statistics-card .data-title {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }
  
  /* 卡片类型样式 */
  .statistics-card.primary .icon-container {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409EFF;
  }
  
  .statistics-card.success .icon-container {
    background-color: rgba(103, 194, 58, 0.1);
    color: #67C23A;
  }
  
  .statistics-card.warning .icon-container {
    background-color: rgba(230, 162, 60, 0.1);
    color: #E6A23C;
  }
  
  .statistics-card.danger .icon-container {
    background-color: rgba(245, 108, 108, 0.1);
    color: #F56C6C;
  }
  
  .chart-row,
  .activity-row {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .chart-container {
    height: 300px;
  }
  
  .chart-placeholder {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    color: #909399;
    font-size: 16px;
    border-radius: 4px;
  }
  
  .activity-list {
    height: 350px;
    overflow-y: auto;
  }
  
  .task-list {
    height: 350px;
    overflow-y: auto;
  }
  </style>